import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {List} from 'immutable';
import moment from 'moment';
import classNames from 'classnames';

import {Timeline} from 'antd';

const TimelineItem = Timeline.Item;


@Relax
export default class OrderLogs extends Component {
    static defaultProps = {
        logs: List()
    }


    constructor(props) {
        super(props);

        this.state = {
            more: false
        }
    }


    render() {
        const {logs} = this.props;
        const {more} = this.state;

        let logsDom = logs.filter((log, index)=>more || index < 2).map((log, index)=>{
            let classState = classNames({
                't-primary': index === 0
            });

            return (
                <TimelineItem key={index} color={index == 0 ? 'blue' : '#ddd'}>
                    <div className={classState}>
                        <span className="pushr">{moment(log.get('optTime')).format('YYYY-MM-DD HH:mm:ss')}</span>
                        <span className="pushr">{log.get('optName')}</span>
                        <span className="pushr">{log.get('eventName')}</span>
                        <span className="pushr">（{log.get('eventResult')}）</span>
                    </div>
                </TimelineItem>
            )
        }).toArray();

        return (
            <div className="order-logs">
                <h4>订单日志</h4>
                <div className="t-grayer">
                    {
                        logs.isEmpty()
                            ? <span>暂无日志信息</span>
                            : <Timeline pending={logs.count() > 2 ? <a href="javascript:void(0);" onClick={()=>this.seeMore()}>{`${more ? '收起' : '查看更多'}`}</a> : false}>{logsDom}</Timeline>
                    }
                </div>
            </div>
        )
    }


    seeMore() {
        this.setState({
            more: !this.state.more
        })
    }
}